<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../412/lib/vue.js"></script>
    <style>
        .navs {
            width: 440px;
            display: flex;
            justify-content: space-between;
        }

        .nav {
            width: 100px;
            height: 38px;
            border-radius: 10px;
            text-align: center;
            line-height: 38px;
            background: pink;
            color: #fff;
            cursor: pointer;
        }

        .nav.active {
            background: deeppink;
            color: aquamarine;
        }

        .contents {
            width: 440px;
            height: 460px;
            overflow: hidden;
            position: relative;
            
        }

        .content {
            width: 1760px;
            height: 460px;
            display: flex;
            flex-wrap: nowrap;
            position: absolute;
            transition: 1s;
            left: 0;
        }


        .citem {
            width: 440px;
            height: 440px;
            border-radius: 20px;
            color: #f50;
            font-size: 60px;
            background: darkorchid;
            text-align: center;
            line-height: 440px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <div class="mains">
            <div class="navs">
                <div class="nav" @click="changeCurrent(0)" :class="current==0?'active':'' ">情感小说
                </div>
                <div class="nav" @click="changeCurrent(1)" :class="current==1?'active':'' ">悬疑小说
                </div>
                <div class="nav" @click="changeCurrent(2)" :class="current==2?'active':'' ">玄幻小说</div>
                <div class="nav" @click="changeCurrent(3)" :class="current==3?'active':'' ">修仙小说</div>
            </div>
            <div class="contents">
                <div class="content">
                    <div class="citem">
                        <!-- :style="{transform:current==0?'translate3d((-440*0)px,0px,0px);':'translate3d(0px,0px,0px);'}" -->
                        情感小说-100
                    </div>
                    <div class="citem">
                        <!-- :style="{transform:current==1?'translate3d((-440*1)px,0px,0px);':'translate3d(0px,0px,0px);'}" -->
                        悬疑小说-50
                    </div>
                    <div class="citem">
                        玄幻小说-30
                    </div>
                    <div class="citem">
                        修仙小说-10
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const vm = new Vue({
            data: {
                title: "style & class",
                current: 0,
            },
            methods: {
                changeCurrent(index) {
                    this.current = index;
                    console.log(this.current);
                    document.querySelector('.content').style.left = -440 * this.current + 'px';
                }
            },
            mounted() {
                document.getElementsByTagName("title")[0];
                innerHTML = this.title;
            }
        }).$mount("#app")
    </script>
</body>

</html>